<div class="deviceInfoBase">
    <div class="device-modular clearfix">
        <h4>基本信息</h4>
        <!-- <h5>基本信息</h5> -->
        <div class="device-modular-main">
            <div class="item-box col-xs-4 no-padding">
                <span class="item-key">公司名称</span>
                <span class="item-value" [attr.title]="">{{deviceBaseInfo.companyName||'--'}}</span>
            </div>
            <div class="item-box col-xs-4 no-padding">
                <span class="item-key">车辆用途</span>
                <span class="item-value" [attr.title]="">{{deviceBaseInfo.userTypeName||'--'}}</span>
            </div>
            <div class="item-box col-xs-4 no-padding">
                <span class="item-key">司机姓名</span>
                <span class="item-value" [attr.title]="">{{deviceBaseInfo.driverName||'--'}}</span>
            </div>
            <div class="item-box col-xs-4 no-padding">
                <span class="item-key">车牌号码</span>
                <span class="item-value" [attr.title]="">{{deviceBaseInfo.carNumber||'--'}}</span>
            </div>
            <div class="item-box col-xs-4 no-padding">
                <span class="item-key">传感器类型</span>
                <span class="item-value" [attr.title]="">
                    <sa-sensor-type [sensorTypeId]="deviceBaseInfo.sensorType" type='2' [inputParam]="inputParam" [isSendRequest]='false'></sa-sensor-type>
                </span>
            </div>
            <div class="item-box col-xs-4 no-padding">
                <span class="item-key">司机电话</span>
                <span class="item-value" [attr.title]="">{{deviceBaseInfo.phone||'--'}}</span>
            </div>
            <div class="item-box col-xs-4 no-padding">
                <span class="item-key">设备ID</span>
                <span class="item-value" [attr.title]="">{{deviceBaseInfo.deviceId||'--'}}</span>
            </div>
            <div class="item-box col-xs-4 no-padding">
                <span class="item-key">产品编码</span>
                <span class="item-value" [attr.title]="">{{deviceBaseInfo.productNo||'--'}}</span>
            </div>
            <div class="item-box col-xs-4 no-padding">
                <span class="item-key">录入人员</span>
                <span class="item-value" [attr.title]="">{{deviceBaseInfo.userNameForCreate||'--'}}</span>
            </div>
            <div class="item-box col-xs-4 no-padding">
                <span class="item-key">硬件版本</span>
                <span class="item-value" [attr.title]="">{{deviceBaseInfo.hwVersion||'--'}}</span>
            </div>
            <div class="item-box col-xs-4 no-padding">
                <span class="item-key">SIM卡号</span>
                <span class="item-value" [attr.title]="">{{deviceBaseInfo.carSim||'--'}}</span>
            </div>
            <div class="item-box col-xs-4 no-padding">
                <span class="item-key">安装时间</span>
                <span class="item-value" [attr.title]="">{{deviceBaseInfo.inputDate||'--'}}</span>
            </div>
            <div class="item-box col-xs-4 no-padding" style="position: relative;height: 22px;">
                <span class="item-key">传感器通道</span>
                <span class="item-value table_scroll" [attr.title]="">
                    <span class="channel-style bg-green" *ngFor="let item of deviceBaseInfo.sensorChannel">{{item}}</span>
                    <span *ngIf="deviceBaseInfo.sensorChannel.length == 0">--</span>
                </span>
            </div>
            <div class="item-box col-xs-4 no-padding" style="position: relative;height: 22px;">
                <span class="item-key">当前系数</span>
                <span class="item-value" [attr.title]="deviceBaseInfo.coef">
                    <span *ngIf='deviceBaseInfo.coefT.length >0'>
                        <span>[</span><span *ngFor="let lis of deviceBaseInfo.coefT;let i = index;">
                            <span style="font-weight: bold;">CH{{lis.index}}:</span><span>{{lis.value}}<span *ngIf="i < deviceBaseInfo.coefT.length-1">,</span></span>
                        </span><span>]</span>
                    </span>
                    <span *ngIf='deviceBaseInfo.coefT.length == 0'>--</span>
                </span>
            </div>
            <div class="item-box col-xs-4 no-padding" style="position: relative;height: 22px;">
                <span class="item-key">算法版本</span>
                <span class="item-value version" [attr.title]="deviceBaseInfo.version">{{deviceBaseInfo.version||'--'}}</span>
            </div>
            <div class="item-box col-xs-4 no-padding" *ngIf="renewalInfo">
                <span class="item-key">续费信息</span>
                <span class="item-value stand_out" [ngClass]="{'isDieLine':renewalInfo.isOverDate=='已到期','noDieLine':renewalInfo.isOverDate!='已到期'}">{{renewalInfo.isOverDate|| '--'}}</span>
                <span class="item-value" *ngIf="renewalInfo.isOverDate">到期时间:</span>
                <span class="item-value" *ngIf="renewalInfo.isOverDate">{{renewalInfo.renewalDueTime}}</span>
            </div>
        </div>
    </div>
    <div class="device-modular clearfix">
        <h4>主机信息<span class="shell">[{{deviceBaseInfo.productNo || '--'}}]</span></h4>
        <div class="device-modular-main">
            <div class="item-box col-xs-4 no-padding">
                <span class="item-key">通道信息</span>
                <span class="item-value" [attr.title]="">{{deviceInfo.productChannel||'--'}}</span>
            </div>
            <div class="item-box col-xs-4 no-padding">
                <span class="item-key">GPS供应商</span>
                <span class="item-value" [attr.title]="">{{deviceInfo.gpsProducer||'--'}}</span>
            </div>
            <div class="item-box col-xs-4 no-padding">
                <span class="item-key">SIM供应商</span>
                <span class="item-value" [attr.title]="">{{deviceInfo.simProducer||'--'}}</span>
            </div>
            <div class="item-box col-xs-4 no-padding">
                <span class="item-key">入库人员</span>
                <span class="item-value" [attr.title]="">{{deviceInfo.inUser||'--'}}</span>
            </div>
            <div class="item-box col-xs-4 no-padding">
                <span class="item-key">入库时间</span>
                <span class="item-value" [attr.title]="">{{deviceInfo.createTime||'--'}}</span>
            </div>
            <div class="item-box col-xs-4 no-padding">
                <span class="item-key">备注</span>
                <span class="item-value" [attr.title]="">{{deviceInfo.remake||'--'}}</span>
            </div>
            <div class="item-box col-xs-4 no-padding">
                <span class="item-key">发货人员</span>
                <span class="item-value" [attr.title]="">{{deviceInfo.outUser||'--'}}</span>
            </div>
            <div class="item-box col-xs-4 no-padding">
                <span class="item-key">发货时间</span>
                <span class="item-value" [attr.title]="">{{deviceInfo.sendTime||'--'}}</span>
            </div>
            <div class="item-box col-xs-4 no-padding">
                <span class="item-key">收货地址</span>
                <span class="item-value" [attr.title]="deviceInfo.sendAddress">{{deviceInfo.sendAddress||'--'}}</span>
            </div>
        </div>

    </div>
    <div class="device-modular clearfix">
        <h4>待维修记录 <span *ngIf="deviceRepaired_0_size > 0">{{deviceRepaired_0_size}}</span></h4>
        <div class="device-modular-main device-toBeRepaired-record" *ngIf="deviceRepaired_0.length > 0;else toBeRepairedEmpty">
            <div class="toBeRepaired-record-list" *ngFor="let item of deviceRepaired_0">
                <div class="item-box col-xs-4 no-padding">
                    <span class="item-key">进场限制</span>
                    <span class="item-value" [attr.title]="">{{item.isPush == 1? '限制': '不限制'}}</span>
                </div>
                <div class="item-box col-xs-4 no-padding">
                    <span class="item-key">故障类型</span>
                    <span class="item-value" [attr.title]="">{{item.faultTypeName||'--'}}</span>
                </div>
                <div class="item-box col-xs-4 no-padding">
                    <span class="item-key">故障现象</span>
                    <span class="item-value" [attr.title]="item.faultPhenomenon">{{item.faultPhenomenon||'--'}}</span>
                </div>
                <div class="item-box col-xs-4 no-padding">
                    <span class="item-key">录入人员</span>
                    <span class="item-value" [attr.title]="">{{item.creater||'--'}}</span>
                </div>
                <div class="item-box col-xs-4 no-padding">
                    <span class="item-key">故障时间</span>
                    <span class="item-value" [attr.title]="">{{item.faultTime||'--'}}
                        <span *ngIf="item.faultTimeDifference" [attr.title]="item.faultTimeDifference">[{{item.faultTimeDifference}}]</span>
                    </span>
                </div>
                <div class="item-box col-xs-4 no-padding">
                    <span class="item-key">录入时间</span>
                    <span class="item-value" [attr.title]="">{{item.createTime||'--'}}
                        <span *ngIf="item.createTimeDifference" [attr.title]="item.createTimeDifference">[{{item.createTimeDifference}}]</span>
                    </span>
                </div>
            </div>
        </div>
        <ng-template #toBeRepairedEmpty>无待维修记录</ng-template>
    </div>
    <div class="device-modular clearfix">
        <h4>维修记录 <span *ngIf="deviceRepaired_1_size > 0">{{deviceRepaired_1_size}}</span></h4>
        <div class="device-modular-main device-repair-record" *ngIf="deviceRepaired_1.length != 0;else repairEmpty">
            <div class="repair-record-list" *ngFor="let item of deviceRepaired_1">
                <div class="item-box col-xs-4 no-padding">
                    <span class="item-key">维修图片</span>
                    <!-- <span class="item-value" [attr.title]="" *ngIf="item.afterImageInfo == null || item.afterImageInfo.length == 0">--</span> -->
                    <span class="clickStyle" (click)="open_img(item.repairId)">查看</span>
                </div>
                <div class="item-box col-xs-4 no-padding">
                    <span class="item-key">故障现象</span>
                    <span class="item-value" [attr.title]="">{{item.faultPhenomenon||'--'}}</span>
                </div>
                <div class="item-box col-xs-4 no-padding">
                    <span class="item-key">维修内容</span>
                    <span class="item-value repairContent" [attr.title]="item.repairContent">{{item.repairContent||'--'}}</span>
                    <img class="tips" *ngIf="item.repairSubdivide && item.repairSubdivide.length != 0" src="assets/img/tips.png" [attr.title]="item.repairSubdivide" />
                    <!-- <span class="clickStyle" *ngIf="item.repairSubdivide && item.repairSubdivide.length != 0" [attr.title]="item.repairSubdivide">[明细]</span> -->
                </div>
                <div class="item-box col-xs-4 no-padding">
                    <span class="item-key">维修人员</span>
                    <span class="item-value" [attr.title]="">{{item.repairedUserName||'--'}}</span>
                </div>
                <div class="item-box col-xs-4 no-padding">
                    <span class="item-key">维修时间</span>
                    <span class="item-value" [attr.title]="">{{item.repairedTime||'--'}}</span>
                </div>
                <div class="item-box col-xs-4 no-padding">
                    <span class="item-key">是否收费</span>
                    <span class="item-value" [attr.title]="">{{item.payStr}}</span>
                    <span class="clickStyle" *ngIf="item.payStr != '无'" (click)="repairedMonkey(item.repairOrders)">[明细]</span>
                </div>
            </div>
        </div>
        <ng-template #repairEmpty>无维修记录</ng-template>
    </div>
    <div class="device-modular clearfix">
        <h4>运维记录</h4>
        <div class="device-modular-main device-devOps-record" *ngIf="logForDeviceEventEntitie.length != 0;else devOpsEmpty">
            <div class="devOps-record-list" *ngFor="let item of logForDeviceEventEntitie">
                <div class="item-box col-xs-3 no-padding">
                    <span class="item-key">操作人员</span>
                    <span class="item-value" [attr.title]="">{{item.userName||'--'}}</span>
                </div>
                <div class="item-box col-xs-3 no-padding">
                    <span class="item-key">事件类型</span>
                    <span class="item-value" [attr.title]="">{{item.typeStr||'--'}}</span>
                </div>
                <div class="item-box col-xs-3 no-padding">
                    <span class="item-key">操作时间</span>
                    <span class="item-value" [attr.title]="">{{item.createTime||'--'}}</span>
                </div>
                <div class="item-box col-xs-3 no-padding">
                    <span class="item-key">操作明细</span>
                    <span class="item-value" [attr.title]="item.description">{{item.description||'--'}}</span>
                </div>
            </div>
        </div>
        <ng-template #devOpsEmpty>无运维记录</ng-template>
    </div>

    <div class="device-modular clearfix">
        <h4>设备状态</h4>
        <div class="device-modular-main">
            <div class="item-box col-xs-4 no-padding">
                <span class="item-key">在线状态</span><span class="item-value">
                    <div *ngIf="deviceRealTimeDataInfo.isEnterFactory == false">
                        <span *ngIf="deviceRealTimeDataInfo.markCombination.fakeOnline === 1" class="red">在线</span>
                    </div>
                    <div *ngIf="deviceRealTimeDataInfo.isEnterFactory == true">
                        <span *ngIf="deviceRealTimeDataInfo.runStatus == '1'" class="green">在线</span>
                        <span class="red" *ngIf="deviceRealTimeDataInfo.runStatus == '0'">离线</span>
                        <span *ngIf="!deviceRealTimeDataInfo.runStatus">--</span>
                    </div>
                </span>
            </div>
            <div class="item-box col-xs-4 no-padding"><span class="item-key">设备电压</span><span class="item-value">{{deviceRealTimeDataInfo.voltage||'--'}}</span>
            </div>
            <div class="item-box col-xs-4 no-padding">
                <span class="item-key">警报类型</span><span class="item-value">
                    <span *ngIf="deviceRealTimeDataInfo.alarmType == '0'||!deviceRealTimeDataInfo.alarmType">无警报</span><span *ngIf="deviceRealTimeDataInfo.alarmType == '2'" class="red">
                        离线警报</span><span *ngIf="deviceRealTimeDataInfo.alarmType == '1'" class="red">断电警报
                    </span>
                </span>
            </div>
            <div class="item-box col-xs-4 no-padding"><span class="item-key">更新时间</span><span class="item-value">{{deviceRealTimeDataInfo.updateTime||'--'}}</span>
            </div>
            <div class="item-box col-xs-4 no-padding"><span class="item-key">采集时间</span><span class="item-value">{{deviceRealTimeDataInfo.voltageTime||'--'}}</span>
            </div>
            <div class="item-box col-xs-4 no-padding"><span class="item-key">警报时间</span><span class="item-value"><span class="red" *ngIf="deviceRealTimeDataInfo.alarmTime">{{deviceRealTimeDataInfo.alarmTime}}</span><span *ngIf="!deviceRealTimeDataInfo.alarmTime">--</span></span></div>
        </div>
    </div>
    <div class="device-modular clearfix">
        <h4>卡信息/状态</h4>
        <div class="device-modular-main">
            <div class="item-box col-xs-4 no-padding">
                <div style="display: flex; align-items: center; width: 100%;">
                    <select class="select2 diy_select" [(ngModel)]="cardType" style="height: 30px; margin-right: 5px;
                    border-color: #ccc;">
                            <option value="1">卡状态</option>
                            <option value="2">卡信息</option>
                    </select>
                    <input [(ngModel)]="cardSearchVal" (keyup)="handleInputKeyup($event.target.value)" class="form-control drawSelect" name="deviceId" id="deviceId" type="text" style="min-width: 250px; height: 30px; margin-right: 20px; " placeholder="请输入iccid" />
                    <button type="button" class="btn btn-primary btn-sm draw-btn" (click)="handleSearchCardList()">查询</button>
                </div>
            </div>
        </div>
        <div class="device-modular-main">
            <div class="table_scroll" style="width: 100%; max-height: 300px;">
                <table class="display dataTables responsive table table-striped table-bordered table-hover dataTable s_h5_table">
                  <thead>
                    <tr>
                      <th>日志类型</th>
                      <th>车牌号</th>
                      <th>设备ID</th>
                      <th>卡供应商返回信息</th>
                      <th>查询时间</th>
                      <th>查询人</th>
                     
                    </tr>
                  </thead>
                  <tbody>
                    <tr *ngFor="let row of cardLogList; let i = index" [attr.data-index]="i">
                        <td>
                            <span *ngIf="row.dataType === '1'" >卡状态</span>
                            <span *ngIf="row.dataType === '2'" >卡信息</span>
                        </td>
                      <td>{{ row.carNumber }}</td>
                      <td>{{ row.deviceId }}</td>
                      <td><button type="button" (click)='handleCheck(row)'>查看</button></td>
                      <td>{{ row.queryDate }}</td>
                      <td>{{ row.queryUser }}</td>
                    </tr>
                  </tbody>
                </table>
              </div>
        </div>
    </div>
    <span *ngIf="isShowOfflineAlert" class="red offline-alert left">异常离线[磅单数:{{weightCount}}][离线时长:{{offlineDiffTime}}]</span>
</div>

<!-- 维修费用明细 -->
<div bsModal id="repairedMonkeyInfo">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" aria-label="Close" (click)="closeRepairedMonkey()"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">维修费用明细</h4>
            </div>
            <div class="modal-body" style="padding: 15px;">
                <div class="table_scroll">
                    <table class="display dataTables responsive table table-striped table-bordered table-hover dataTable s_h5_table">
                        <thead>
                            <tr>
                                <th>维修内容</th>
                                <th>单价[元]</th>
                                <th>数量</th>
                                <th>总费用[元]</th>
                                <th>备注</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr *ngFor="let row of repairedMonkeyPage; let i = index">
                                <td>{{row.costDetail}}</td>
                                <td>{{row.priceType==1?row.price/100:row.discountPrice/100}}</td>
                                <td>{{row.count}}{{row.unit}}</td>
                                <td>{{row.totalPrice/100}}</td>
                                <td>{{row.remark}}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 维修费用明细 end-->

<!-- 图片查看   弹窗-->
<section id="deviceInfoImg">
    <!-- <div class="modal-dialog modal-lg" style="width: 800px;"> -->
    <div class="modal-content" id="modal-imgBox">
        <div id="modal-imgHeader-box" class="modal-header">
            <button type="button" class="close" (click)="imgClose()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">图片查看</h4>
        </div>
        <div class="modal-body">
            <div class="row form-horizontal">
                <div class="form-group col-xs-12 imagesDeviceInfo">
                    <div class="col-xs-6 imgContList">
                        <p class="imgTit">维修前</p>
                        <div class="col-xs-12 imgViewMain">
                            <div class="col-xs-12 imgViewCont" *ngFor="let row of beforeImageInfo">
                                <div class="col-xs-3 imgViewTit"><span>{{row.name}}</span></div>
                                <div class="col-xs-9 imgViewList">
                                    <img class="imgViewShow" *ngFor="let item of row.imageUrl" [src]='item' [alt]='row.name' (click)="bigimg()" />
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="col-xs-6 imgContList">
                        <p class="imgTit">维修后</p>
                        <div class="col-xs-12 imgViewMain">
                            <div class="col-xs-12 imgViewCont" *ngFor="let row of afterImageInfo">
                                <div class="col-xs-3 imgViewTit"><span>{{row.name}}</span></div>
                                <div class="col-xs-9 imgViewList">
                                    <img class="imgViewShow" *ngFor="let item of row.imageUrl" [src]='item' [alt]='row.name' (click)="bigimg()" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- </div> -->
</section>
<!-- 图片查看 弹窗end-->


<!-- 车辆信息列表弹窗 -->
<div bsModal id="carfListModel">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" aria-label="Close" (click)="closeCardInfoModel()"><span aria-hidden="true">&times;</span></button>
                <h4 *ngIf="currentAlertType === 1" class="modal-title">卡状态</h4>
                <h4 *ngIf="currentAlertType === 2" class="modal-title">卡信息</h4>
            </div>
            <div class="modal-body" style="padding: 15px;">
                <div class="car-info-title">
                    <div class="car-info-item">
                        <span class="title">ICCID:</span>
                        <span class="text">{{carInfo.iccid}}</span>
                    </div>
                    <div class="car-info-item">
                        <span class="title">卡供应商:</span>
                        <span class="text">{{carInfo.provider}}</span>
                    </div>
                    <div class="car-info-item">
                        <span class="title">接口状态:</span>
                        <span class="text">{{carInfo.code}}</span>
                    </div>
                    <div class="car-info-item">
                        <span class="title">接口描述:</span>
                        <span class="text">{{carInfo.message}}</span>
                    </div>
                </div>
                
                <div *ngIf="currentAlertType === 1">
                    <div class="car-info-item">
                        <span class="title">IP:</span>
                        <span class="text">{{carInfo.ip}}</span>
                    </div>
                    <div class="car-info-item">
                        <span class="title">APN:</span>
                        <span class="text">{{carInfo.apn}}</span>
                    </div>
                    <div class="car-info-item">
                        <span class="title">设备状态:</span>
                        <span class="text">{{carInfo.deviceStatusMsg}}</span>
                    </div>
                    <div class="car-info-item">
                        <span class="title">在线状态:</span>
                        <span class="text">{{carInfo.onlineStatusMsg}}</span>
                    </div>
                    <div class="car-info-item">
                        <span class="title">网络类型:</span>
                        <span class="text">{{carInfo.networkType}}</span>
                    </div>
                    <div class="car-info-item">
                        <span class="title">物联网卡状态:</span>
                        <span class="text">{{carInfo.cardStatusMsg}}</span>
                    </div>
                    <div class="car-info-item">
                        <span class="title">网络服务状态:</span>
                        <span class="text">{{carInfo.netWorkStatusMsg}}</span>
                    </div>
                    <div class="car-info-item">
                        <span class="title">区域限制描述:</span>
                        <span class="text" [class]="carInfo.regionLimitStatus === 1 ? 'car-red' : ''">{{carInfo.regionLimitStatusMsg}}</span>
                    </div>
                    <div class="car-info-item">
                        <span class="title">区域限制省份:</span>
                        <span class="text">{{carInfo.restrictedArea}}</span>
                    </div>
                    <div class="car-info-item">
                        <span class="title">区域限制方式:</span>
                        <span *ngIf="carInfo.areaRestrictType === 1" class="text">手动录入方式</span>
                        <span *ngIf="carInfo.areaRestrictType === 2" class="text">首话激活（数据）方式）</span>
                    </div>
                    <div class="car-info-item">
                        <span class="title">备注:</span>
                        <span class="text">{{carInfo.remark}}</span>
                    </div>
                </div>
                <div *ngIf="currentAlertType === 2">
                    <div class="car-info-item">
                        <span class="title">imsi:</span>
                        <span class="text">{{carInfo.imsi}}</span>
                    </div>
                    <div class="car-info-item">
                        <span class="title">iccid:</span>
                        <span class="text">{{carInfo.iccid}}</span>
                    </div>
                    <div class="car-info-item">
                        <span class="title">msisdn:</span>
                        <span class="text">{{carInfo.msisdn}}</span>
                    </div>
                    <div class="car-info-item">
                        <span class="title">运营商:</span>
                        <span class="text">{{carInfo.carrier}}</span>
                    </div>
                    <div class="car-info-item">
                        <span class="title">卡状态:</span>
                        <span class="text">{{carInfo.cardStatusMsg}}</span>
                    </div>
                    
                    <div class="car-info-item">
                        <span class="title">流量套餐:</span>
                        <span class="text">{{carInfo.dataPlan}}</span>
                    </div>
                    <div class="car-info-item">
                        <span class="title">使用流量:</span>
                        <span class="text">{{carInfo.dataUsage}}</span>
                    </div>
                    <div class="car-info-item">
                        <span class="title">激活日期:</span>
                        <span class="text" >{{carInfo.activateTime}}</span>
                    </div>
                    <div class="car-info-item">
                        <span class="title">到期日期:</span>
                        <span class="text">{{carInfo.expiryTime}}</span>
                    </div>
                    <div class="car-info-item">
                        <span class="title">备注:</span>
                        <span class="text">{{carInfo.remark}}</span>
                    </div>
                </div>
                
            </div>
        </div>
    </div>
</div>
<!-- 车辆信息列表弹窗 end-->